<!--
 * @Author: 秦福凯
 * @LastEditTime: 2025-01-24 17:03:13
 * @Description: 主题设置抽屉组件
-->
<template>
  <el-drawer v-model="drawerVisible" title="主题设置" size="290px">
      <!-- 全局主题 -->
    <el-divider class="divider" content-position="center">
      <el-icon><ColdDrink /></el-icon>
      全局主题
    </el-divider>
    <div class="theme-item">
      <span>主题颜色</span>
      <el-color-picker v-model="primary" :predefine="colorList"  @change="changePrimary"/>
    </div>
    <div class="theme-item">
      <span>暗黑模式</span>
      <el-switch v-model="globalStore.isDark" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" @change="switchDark" />
    </div>
    <div class="theme-item">
      <span>灰色模式</span>
      <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
    </div>
    <div class="theme-item mb40">
      <span>色弱模式</span>
      <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
    </div>
  </el-drawer>
</template>

<script setup>
import { Sunny, Moon } from "@element-plus/icons-vue";

import { ref } from "vue"
import mittBus from "@/utils/mittBus.js"

import { storeToRefs } from "pinia"
import { useGlobalStore } from "@/store/global"
import { useTheme } from "@/hooks/useTheme"

const globalStore = useGlobalStore();
const {primary,isGrey,isWeak} = storeToRefs(globalStore);
const { changePrimary,switchDark,changeGreyOrWeak} = useTheme();


// 预定义主题颜色
const colorList = [
  primary.value,
  "#daa96e",
  "#0c819f",
  "#409eff",
  "#27ae60",
  "#ff5c93",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6"
];

const drawerVisible = ref(false)
// 事件车接收
mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));

</script>

<style lang="scss" scoped>
.theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  margin: 14px 0;
  span {
    display: flex;
    align-items: center;
    font-size: 14px;
    .el-icon {
      margin-left: 3px;
      font-size: 15px;
      color: var(--el-text-color-regular);
      cursor: pointer;
    }
  }
}

</style>

